<template>
	<view class="container">
		<!-- 圆形图片显示区域 -->
		<image  :src="imageUrl" mode="aspectFill" class="image-placeholder round-image" @click="chooseImage"></image>
		<!-- 功能按钮区域 -->
		<view class="btn-group">
			<button @click="previewImage" class="custom-btn preview-btn">预览图片</button>
					<!-- 网络图片下载区域 -->
					<view class="section">
					<button @click="downloadNetworkImage" class="custom-btn download-btn">下载网络图片</button>
					<image v-if="networkImageUrl" :src="networkImageUrl" mode="widthFix" class="preview-image"></image>
					<!-- 下载进度提示 -->
					<view v-if="downloadProgress > 0 && downloadProgress < 100" class="progress-tip">
				下载进度：{{ downloadProgress }}%
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '' ,
				networkImageUrl: '',
				downloadProgress: 0
			}
		},
		methods: {
			// 选择本地图片
			chooseImage() {
				uni.chooseImage({
					count: 1, // 仅选择1张图片
					sizeType: ['original', 'compressed'], // 支持原图/压缩图
					sourceType: ['album', 'camera'], // 支持相册/相机
					success: (res) => {
						// 赋值临时图片路径用于显示
						this.imageUrl = res.tempFilePaths[0];
					},
					fail: () => {
						uni.showToast({
							title: '图片选择失败',
							icon: 'none'
						});
					}
				});
			},
			// 预览图片
			previewImage() {
				if (this.imageUrl) {
					uni.previewImage({
						current: this.imageUrl, // 当前预览图片
						urls: [this.imageUrl], // 预览图片列表
						fail: () => {
							uni.showToast({
								title: '图片预览失败',
								icon: 'none'
							});
						}
					});
				} else {
					// 未选择图片时提示
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					});
				}
			},
			//下载网络图片
						downloadNetworkImage() {
							this.downloadProgress = 0;
							// 获取下载任务实例
							const downloadTask = uni.downloadFile({
								url: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg',
								success: (res) => {
									if (res.statusCode === 200) {
										this.downloadProgress = 100;
										this.networkImageUrl = res.tempFilePath;
										uni.showToast({
											title: '图片下载完成',
											icon: 'success'
										});
										setTimeout(() => {
											this.downloadProgress = 0;
										}, 3000);
									}
								},
								fail: (err) => {
									console.error('下载图片失败', err);
									this.downloadProgress = 0;
									uni.showToast({
										title: '图片下载失败',
										icon: 'none'
									});
								}
							});
			
							// 监听下载进度
							downloadTask.onProgressUpdate((res) => {
								this.downloadProgress = res.progress;
								console.log(`下载进度：${res.progress}%`);
							});
			}

		}
	}
</script>

<style scoped>
	.container {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 圆形图片样式 */
	.round-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%; 
		border: 2rpx solid #eee;
		overflow: hidden; 
	}
	
	/* 图片占位符样式 */
	.image-placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #999;
		font-size: 24rpx;
	}
	
	/* 按钮组样式 */
	.btn-group {
		margin-top: 60rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20rpx; 
	}
	
	/* 自定义按钮样式 */
	.custom-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-color: #007aff;
		color: #fff;
		font-size: 32rpx;
	}
	
	/* 预览按钮差异化样式 */
	.preview-btn {
		background-color: #34c759;
	}
	
	/* 下载按钮样式 */
	.download-btn {
		background-color: #3CD6FF;
	}
	
	/* 下载的图片预览样式 */
	.preview-image {
		width: 500rpx;
		height: 300rpx;
		border-radius: 16rpx;
		overflow: hidden;
		border: 1rpx solid #eee;
	}
	
		/* 下载进度提示 */
	.progress-tip {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		margin-top: 10rpx;
	}
</style>